<template>
	<view class="plan-container">
		<picker-view
			:value="planIndexes"
			indicator-style="height: 44px; background-color: rgba(0, 122, 255, 0.1); border: 1px solid #007AFF; border-radius: 8px;"
			mask-style="background-image: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0.6)), linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0.6));"
			:immediate-change="true"
			@change="updatePlan"
			@pickstart="onPickStart"
			@pickend="onPickEnd"
			class="fitness-picker-view"
		>
			<picker-view-column>
				<view class="picker-item" v-for="(item, index) in planOptions.types" :key="index">{{ item }}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="picker-item" v-for="(item, index) in planOptions.durations" :key="index">{{ item }}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="picker-item" v-for="(item, index) in planOptions.intensities" :key="index">{{ item }}</view>
			</picker-view-column>
		</picker-view>
		<view class="plan-summary" :class="{ picking: isPicking }">
			<view class="summary-title">今日计划</view>
			<view class="summary-text">{{ currentPlanDescription }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			planOptions: {
				types: ['跑步', '瑜伽', 'HIIT', '力量', '拉伸'],
				durations: ['15分钟', '30分钟', '45分钟', '60分钟'],
				intensities: ['低强度', '中等强度', '高强度']
			},
			planIndexes: [2, 1, 1],
			currentPlanDescription: '',
			isPicking: false
		};
	},
	created() {
		// 初始化时生成描述
		this.generateDescription(this.planIndexes);
	},
	methods: {
		updatePlan(e) {
			const indexes = e.detail.value;
			this.planIndexes = indexes;
			this.generateDescription(indexes);
		},
		generateDescription(indexes) {
			const type = this.planOptions.types[indexes[0]] || '';
			const duration = this.planOptions.durations[indexes[1]] || '';
			const intensity = this.planOptions.intensities[indexes[2]] || '';
			this.currentPlanDescription = `${type} | ${duration} | ${intensity}`;
		},
		onPickStart() {
			this.isPicking = true;
		},
		onPickEnd() {
			this.isPicking = false;
			// 在选择结束时，提供一个短暂的震动反馈
			// 这让用户感觉操作被立即响应了，有效提升体验
			uni.vibrateShort({
				success: function () {
					console.log('震动成功');
				},
				fail(err) {
					console.log('震动失败', err);
				}
			});
		}
	}
};
</script>

<style scoped>
/* 1. 容器使用明亮的背景色 */
.plan-container {
	background-color: #f0f2f5; /* 替换深色背景为一个柔和的浅灰色 */
	height: 100vh;
	padding-top: 50px;
}

.fitness-picker-view {
	width: 100%;
	height: 250px;
}

/* 2. picker-item 文字使用深色，确保高对比度 */
.picker-item {
	line-height: 44px;
	text-align: center;
	color: #333333; /* 使用深灰色文字，在浅色背景上清晰可读 */
	font-size: 18px;
	font-weight: 500; /* 适当加粗，提升清晰度 */
}

/* 3. 摘要卡片也更新为浅色主题 */
.plan-summary {
	margin: 30px 20px;
	padding: 20px;
	background-color: #ffffff; /* 卡片使用纯白背景 */
	border-radius: 12px;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 添加柔和的阴影以增加层次感 */
}

/* 4. 交互动效的颜色也随主题改变 */
.plan-summary.picking {
	transform: scale(1.05);
	box-shadow: 0 0 20px rgba(0, 122, 255, 0.3); /* 辉光效果变为主题蓝色 */
}

.summary-title {
	color: #666666; /* 标题使用中灰色 */
	font-size: 16px;
}

.summary-text {
	color: #007aff; /* 关键信息使用主题色——清晰的蓝色 */
	font-size: 22px;
	font-weight: bold;
	margin-top: 10px;
}
</style>
